<template>
	<view class="column-start goods-view" @click="goodsClick">
		<image lazy-load :src='imgSite + item.coverPicture' mode="aspectFill"></image>
		<view class=" text-line-clamp-two goods-name">
<!--			<text class="goods-tag" v-if='item.selfSupporting == 0'>自营</text>-->
			<text>{{item.goodsName}}</text>
		</view>
		<view class="row-start goods-tag-view">
			<view :class="[goodsLabe[it].clas]" v-for="it in item.goodsLabelArr">{{goodsLabe[it].name}}</view>
		</view>
		<view class="row-start" style="width: 100%; color: #333333;font-weight: bold;padding: 0 20upx;margin-bottom: 6upx;align-items: baseline;">
			<text style="font-size: 22upx;">￥</text>
			<text style="font-size: 34upx;">{{item.salesPrice}}</text>
			<text style="font-size: 24upx;">{{item.zero || ''}}</text>
		</view>
		<view class="row-start" style="width: 100%;padding: 0 20upx;font-size: 24upx;color: #999999;text-decoration: line-through;">￥{{item.marketPrice}}</view>
		<view class="column-div tag-img-view">贡献值{{item.contribution}}</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		props:{
			item: Object
		},
		data() {
			return {
				goodsLabe: {
					'10': {
						name: '溯源',
						clas: ''
					},
					'20': {
						name: '恒量',
						clas: 'yellow'
					},
					'30': {
						name: '认证',
						clas: 'blue'
					}
				}
			};
		},
		computed: {
			...mapState(['imgSite'])
		},
		methods: {
			goodsClick () {
				console.log(this.item)
				let {activityType, goodsCd } = this.item
				// 2：秒杀活动 5：砍价 6：拼团预售
				let url = activityType == 2 ? '/pages/detail/seckill' : activityType == 5 ? '/pages/detail/bargain' : activityType == 6 ? '/pages/detail/preGroup' : '/pages/detail/detail';
				uni.navigateTo({
					url: url + '?id=' + goodsCd
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-view {
		background: #FFFFFF;
		box-shadow: 0px 3upx 6upx 0px rgba(196, 196, 196, 0.1);
		border-radius: 10upx;
		position: relative;
		padding-bottom: 34upx;
		margin-bottom: 23upx;
		justify-content: flex-start;
		align-items: flex-start;

		image {
			width: 100%;
			height: 320upx;
			border-radius: 10upx 10upx 0px 0px;
			margin-bottom: 27upx;
		}

		.goods-name {
			width: 100%;
			height: 68upx;
			padding: 0 20upx;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 20upx;
			text-align: left;
			.goods-tag {
				padding: 3upx 8upx;
				background: #FE5E49;
				border-radius: 3upx;
				font-size: 22upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 10upx;
			}
		}

		.goods-tag-view {
			width: 100%;
			height: 44upx;
			padding: 0 20upx;
			flex-wrap: wrap;
			margin-bottom: 21upx;
			
			.blue{
				border: 1px solid #2CA6FE;
				color: #2CA6FE;
			}
			.yellow{
				border: 1px solid #FD8900;
				color: #FD8900;
			}
			view {
				padding: 4upx 9upx;
				border: 1px solid #59C265;
				border-radius: 3upx;
				font-size: 18upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #59C265;
				margin-right: 12upx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
		
		.tag-img-view{
			width: 176upx;
			height: 61upx;
			position: absolute;
			bottom: 15upx;
			right: -16upx;
			background-image: url(../../static/assets/gongxian.png);
			background-size: 100%;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE5E49;
			padding-left: 15upx;
			padding-top: 5upx;
			// image{
			// 	width: 100%;
			// 	height: 100%;
			// }
		}
	}
</style>
